<template>

	<div class="nav">
		<div class="nav-btn-div">
			<img class="nav-logo-icon" src="../assets/LOGO 01.svg" />
			<button @click="openNav($event)" index="0" class="nav-btn">
				<img ref="btnimg" src="../assets/菜单.png"/>
			</button>

		</div>
		<div>

			<ul class="index-nav" ref="nav1" :class="{open:isOpen}">
				<li @click="closeNav"><router-link to="/main">首页</router-link></li>
				<li @click="closeNav"><router-link to="/cstudy">C++研发</router-link></li>
				<li @click="closeNav"><router-link to="/test">测试开发</router-link></li>
				<li @click="closeNav"><router-link to="/javastudy">JAVA</router-link></li>
				<li @click="closeNav"><router-link to="/teacher">导师阵容</router-link></li>
				<li @click="closeNav"><router-link to="/goodlesson">精品项目</router-link></li>
				<li @click="closeNav"><router-link to="/stujob">学院就业</router-link></li>
				<li class="secon-li" @click="openSecond">百宝箱
					<ul :class="{open:isClose}">
						<li @click="closeNav"><router-link to="/software">常用软件</router-link></li>
						<li @click="closeNav"><router-link to="/skillbk">技术博客</router-link></li>
						<li @click="closeNav"><router-link to="/btreabox">常见问题</router-link></li>
						<li @click="closeNav"><router-link to="/book">书籍推荐</router-link></li>
						<li @click="closeNav"><router-link to="/interview">精彩面经</router-link></li>
					</ul>
				</li>
			</ul>
		</div>



 </div>
</template>
<script>
	import Vue from 'vue';
	import {Menu,MenuItem} from 'element-ui'
    Vue.use(Menu);
    Vue.use(MenuItem);
export default {
  	name:'NavMain',
  	mounted(){
  		this.tableData()
    },
    data(){
    	return {
    		msg:'测试',
    		isCollapse:true,
    		isOpen:false,
    		isClose:false

    	}
    },
    methods:{
    	tableData(){
    		let self = this;
    		this.msg = '';
    		this.$refs.index="0";
    	},
    	openNav(event){
    		console.log(event.target)
    		if(this.$refs.index=='0'){
    			this.isOpen=true;
    			this.isClose = false;
    			this.$refs.index="1";
    			event.target.src = require('../assets/关闭.png')
    		}else{
    			this.isOpen=false;
    			this.$refs.index="0";
    			event.target.src = require('../assets/菜单.png')

    		}

    	},
    	closeNav(){
    		this.isOpen = false;
    		this.isClose = false;
    		this.$refs.index="0";
    		this.$refs.btnimg.src= require('../assets/菜单.png');
    	},
    	openSecond(){
    		this.isClose = true;
    	}


    }
}
</script>
<style>
	button:focus{
		outline: none;
	}
	.nav ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.open{
		display: block!important;
	}
	.index-nav{
		text-align: center;
		/*min-height: 300px;*/
		display: none;
	}
	.index-nav li{
		min-height: 50px;
		font-size: 18px;
		background: rgba(229,229,229,0.9);
		line-height: 50px;

	}
	.index-nav ul{
		display: none;
	}
	.nav-btn{
		position: absolute;
		top: 20px;
		background: none;
		border: none;
		right: 10px;
		height: 40px;
	}
	.nav-btn img{
		width: 25px;
	}
	.is-active{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		color: white!important;
	}
	.router-link-active{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		color: white!important;
	}
 	.nav a{
		text-decoration: none;
		display: inline-block;
		color: #808080;
		width: 100%;
		height: 50px;
		text-align: center;
	}

	.nav-a{
		/*color:black;*/
		display: inline-block;
		height: 40px!important;
		background: none!important;
		width: 100%;
		text-align: center;
	}
	body{
		margin: 0;
		padding: 0;
	}
	.nav-logo-icon{
		width: 150px;
		margin: 10px;
		vertical-align: middle;
	}


	.tele-icon{
		height: 35px;
		width: 30px;
		vertical-align: bottom;
	}
	.stu-login{
		width: 80px;
		background:#f9f7f8 ;
		height: 35px;
		border: solid 1px #c7c7c7;
	}
	.nav-diviline{
		position: relative;
		top: 13px;
		display: inline-block;
		height: 35px;
		margin-left: 20px;
		margin-right: 20px;
		border-left: 1px #c7c7c7 solid;
	}
	.nav{
		position: absolute;
		z-index: 1000;
		width: 100%;

	}
	.nav-btn-div{
		background: white;
		position: relative;
		height: 80px;
	}
</style>
